<script setup>

</script>
<template>
  <div class="content">
    <div class="header">
      <div class="logo">青书</div>
      <div class="top">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
      @select="handleSelect">
      <router-link to="/promotlogin" class="nav-link">
        <el-menu-item>首页</el-menu-item>
      </router-link>
      <el-menu-item>成功案例</el-menu-item>
      <el-menu-item>种草有数</el-menu-item>
      <el-sub-menu index="1">
        <template #title>种草大赛</template>
        <el-menu-item index="1-1">参赛入口</el-menu-item>
        <el-menu-item index="1-2">评审入口</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="2">
        <template #title>帮助中心</template>
        <el-menu-item index="2-1">审核规划</el-menu-item>
        <el-menu-item index="2-2">小红书合作伙伴查询</el-menu-item>
      </el-sub-menu>
    </el-menu>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>
<style scoped>
.content {
  display: flex;
  flex-direction: column;
}
.logo {
  width: 100px;
  height: 50px;
  line-height: 50px;
  margin: 20px;
  font-size: 24px;
  text-align: center;
  border-radius: 10px;
  color: #fff;
  font-weight: bold;
  background-color: #20bafd;
}
.header{
  display: flex;
  align-items: center;
}
.banner {
  height: 300px;
  display: flex;
  background-color: #4aaff2;
  color: #fff;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 50px;
}
.banner h1 {
  font-size: 36px;
  margin-bottom: 20px;
}
.banner text {
  font-size: 16px;
  display: block;
}
.center {
  padding: 40px 20px;
  display: flex;
  justify-content: center;
}
.form-item {
  display: flex;
  align-items: center;
  margin-top: 50px;
}
.form-item label {
  width: 100px;
  text-align: right;
  margin-right: 15px;
  font-size: 14px;
  color: #333333;
}
.form-item input {
  flex: 1;
  padding: 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.2s ease;
}
.form-item input:focus {
  border-color: var(--primary-color);
  outline: none;
}

.verify-code .send-code {
  margin-left: 10px;
  padding: 10px 15px;
  background-color: var(--primary-color);
  border-radius: 4px;
  color: rgb(92, 185, 236);
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s ease;
}
.verify-code .send-code:hover {
  background-color: #66b1ff;
  color: #fff;
}

form button {
  margin-left: 200px;
  margin-top: 50px;
  padding: 10px 25px;
  background-color: var(--primary-color);
  color: rgb(92, 185, 236);
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

form button:hover {
  background-color: #66b1ff;
  color: #fff;
}

.bottom {
  background-color: #f5f7fa;
  padding: 25px 20px;
  text-align: center;
  color: #666;
  line-height: 1.6;
  font-size: 14px;
}

.bottom text {
  display: block;
  margin: 5px 0;
}
.nav-link {
  text-decoration: none;
  color: inherit;
  display: block;
  width: 100%;
  height: 100%;
}
</style>